<!-- Tommy -->
<title>部门未写日报查询</title>

<link rel="stylesheet" href="lib/assets/css/daterangepicker.css"/>


<!-- ajax layout which only needs content area -->
<div class="page-header">
    <h1>
        部门工作量查询
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            部门未写日报查询
        </small>
    </h1>

</div><!-- /.page-header -->
<div class="row" data-ng-controller="pageContentController" data-ng-cloak>
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <!-- 查询表格-->
        <div class="widget-box">
            <div class="widget-header">
                <h4 class="widget-title">查询条件</h4>
            </div>

            <div class="widget-body" style="display: block;">
                <div class="widget-main" data-ng-controller="searchFormController">
                    <form method="get" name="searchForm"
                          data-ng-submit="submitSearchForm(searchForm.$valid,'1')" novalidate>
                        <div class="row">

                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1 col-lg-4 col-lg-push-2" data-ng-class="{'has-error' : searchForm.dateRange.$invalid && searchFormIsSubmitted }">
                                <div class="space space-4"></div>
                                <label>日期</label>
                                <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="fa fa-calendar bigger-110"></i>
                                            </span>

                                    <input class="form-control  text-center" type="text"
                                           name="dateRange" id="dateRange-in-searchForm"
                                           data-ng-model="searchFormData.dateRange"
                                           value="searchFormData.dateRange"
                                           data-ng-change="updateSearchFormRange()" readonly required/>
                                </div>
                                <div class="space space-4"></div>
                                <p  data-ng-show="searchForm.dateRange.$invalid && searchFormIsSubmitted" class="help-block" hidden><i class="ace-icon fa fa-angle-up"></i><small>日期范围没有填写</small></p>

                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1 col-lg-4 col-lg-push-2" data-ng-class="{'has-error' : searchForm.depId.$invalid && searchFormIsSubmitted }">
                                <div class="space space-4"></div>
                                <label>部门</label>
                                <select name="depId" class="form-control"
                                        data-ng-model="searchFormData.depId"
                                        data-ng-options=" emp.value as emp.displayName for emp in searchFormRange.depIdRange"
                                        data-ng-change="updateSearchFormRange()" required>
                                </select>
                                <p  data-ng-show="searchForm.depId.$invalid && searchFormIsSubmitted" class="help-block" hidden><i class="ace-icon fa fa-angle-up"></i><small>部门没有选择</small></p>
                                <div class="space space-4"></div>
                            </div>
                        </div>



                        <!-- 按钮 -->
                        <div class="row">
                            <div class="col-xs-12 col-md-pull-1 col-lg-pull-2">
                                <div class="space space-4"></div>
                                <input type="button" class="btn btn-xs pull-right"
                                       data-ng-click="setDefaultSearchFormData()" value="重置"/>
                                <input type="submit" class="btn btn-primary btn-xs pull-right" value="搜索"/>
                                <!-- TODO  -->
                                <div class="space space-4"></div>
                            </div>
                        </div>
                        <!-- /按钮 -->

                    </form>

                </div>
            </div>
        </div>
        <!-- /查询表格-->
        <!-- 分界线 -->
        <div class="hr hr-double hr-dotted hr10"></div>
        <!-- /分界线 -->
        <!-- 结果表格 -->
        <div data-ng-controller="resultTableController" data-ng-show="resultTableData">
            <div class="col-xs-12 col-sm-6 col-md-5 col-lg-4" style="padding: 0px">
                <div class="input-group">
                        <span id="searchInResultToggle" class="input-group-addon"><i
                                class="ace-icon fa fa-search"></i></span>
                    <input id="searchInResult" type="text" class="form-control" placeholder="在结果中搜索"
                           data-ng-model="searchInResult"/> <!-- TODO style -->
                </div>
            </div>
            <table id="resultTable" class="table table-striped table-bordered table-hover">
                <thead>
                <tr>

                    <th data-ng-repeat="(reference, displayName) in resultTableData.tableHead">
                        {{displayName}}
                    </th>
                </tr>
                <tr>

                    <th data-ng-repeat="(reference, displayName) in resultTableData.tableHead2">
                        {{displayName}}
                    </th>
                </tr>
                </thead>

                <tbody class="text-right">
                <tr data-ng-repeat="row in resultTableData.tableRow | filter: searchInResult"
                    data-row-id="{{row[resultTableData.identity]}}">


                    <td data-ng-repeat="(key,value) in row"  data-ng-class="{'alert-danger': value == '0'}">
                        {{value}}
                    </td>
                </tr>

                </tbody>
            </table>
            <div class="col-xs-12 col-sm-8 col-sm-push-2 col-md-6 col-md-push-3 col-lg-4 col-lg-push-4 center"
                 style="padding: 0px" data-ng-show="!(resultTableData.totalPageNumber == '1')">
                <ul class="pagination" style="margin: 0">
                    <li data-ng-repeat=" number in resultTableData.pageNumberArray"
                        data-ng-class="{'active' : number == resultTableData.pageNumber}"><a
                            data-ng-click="getResultByPage(number)">{{number}}</a></li>
                    <li class="disabled"><a>总记录：{{resultTableData.totalRowNumber}} 条</a></li>
                </ul>
            </div>

        </div>
        <!-- /结果表格 -->
        <!-- Modal -->
        <!-- PAGE CONTENT ENDS -->
    </div>
    <!-- /.col -->
</div><!-- /.row -->


<!-- page specific plugin scripts -->
<script type="text/javascript">

    var scripts = [null,"lib/assets/js/date-time/moment.js", "lib/assets/js/date-time/daterangepicker.js", null];
    $('.page-content-area').ace_ajax('loadScripts', scripts, function () {
        //inline scripts related to this page
        jQuery(function ($) {
            $('input[name=dateRange]').daterangepicker({
                'applyClass': 'btn-sm btn-success',
                'cancelClass': 'btn-sm btn-default',
                format: 'YYYY-MM-DD',
                dateLimit: { days: 14},
                locale: {
                    applyLabel: '选择',
                    cancelLabel: '取消',
                    fromLabel: '从',
                    toLabel: '到',
                    daysOfWeek: ['日', '一', '二', '三', '四', '五','六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    firstDay: 1
                }
            })
                    .prev().on(ace.click_event, function () {
                        $(this).next().focus();
                    });

        });


        //AngularJS
        var app = angular.module('contentApp');
        var servletLocation = "depQuery";
        var messageHandler = function (data) {
            if (data["returnMessage"] != null && data["returnMessage"] != undefined) {
                if(data["returnMessage"].messageType == 'error'){
                    data["returnMessage"].messageType = 'danger';
                }
                $.bootstrapGrowl(data.returnMessage.message, {
                    type: data.returnMessage.messageType, // (null, 'info', 'error', 'success')
                    offset: {from: 'top', amount: 50}, // 'top', or 'bottom'
                    align: 'right', // ('left', 'right', or 'center')
                    width: 250, // (integer, or 'auto')
                    delay: function (type) {
                        if (type == 'error') {
                            return 7000;
                        } else {
                            return 3000;
                        }
                    }(data.returnMessage.messageType),
                    allow_dismiss: true,
                    stackup_spacing: 10 // spacing between consecutively stacked growls.
                });
            }
            return data;
        };
        //页面控制器
        app.controller("pageContentController", function ($scope) {
            $scope.$on("TableResultUpdateTOParent", function (event, msg) {
                $scope.$broadcast("TableResultUpdate", msg);
            });
            $scope.$on("TableResultByPageTOParent", function (event, msg) {
                $scope.$broadcast("TableResultByPage", msg);
            });
        });

        //查询表单控制器
        app.controller("searchFormController", function ($scope, $http) {
            //初始化表单数据
            //方法
            //重置表单到默认状态
            $scope.setDefaultSearchFormData = function () {
                $scope.searchFormData = {
                    //如有需要 可以从服务器获取
                };
                $scope.$emit("TableResultUpdateTOParent", undefined);
            }();
            //更新表单范围

            $scope.updateSearchFormRange = function () {
                //获取当前状态下 选项的范围
                var sendData ={};
                sendData["service"]="getDepIdRange";
                sendData["empId"]="1";                                              //TODO

                $http.post(servletLocation, sendData).success(function (response) {  //TODO Modify the api & post info here
                    $scope.searchFormRange = response;
                });
            }();
            //提交表单操作
            $scope.submitSearchForm = function (valid, page) {
                $scope.searchFormIsSubmitted = true;

                if (valid) {
                    var sendData = jQuery.extend(true, {}, $scope.searchFormData);
                    sendData["service"] = "searchNoWritn";
                    sendData["depId"] = $scope.searchFormData.depId;
                    sendData["page_num"] = page;
                    var startDate,endDate;
                    var date = $scope.searchFormData.dateRange.split(" - ");
                    startDate = date[0];
                    endDate = date [1];
                    sendData["startDate"]=startDate;
                    sendData["endDate"]=endDate;
                    console.log(sendData);
                    //处理存放在 $scope.searchFormData 下的数据并发送到服务器
                    $http.post(servletLocation, sendData).success(function (response) {  //TODO Modify the api & post info here
                        //获取到结果列表

                        //将更新事件冒泡到父控制器
                        $scope.$emit("TableResultUpdateTOParent", messageHandler(response));
                    });
                }
            };
            $scope.$on("TableResultByPage", function (event, msg) {
                $scope.submitSearchForm($scope.searchForm.$valid, msg);
            });
        });

        //结果表格控制器
        app.controller("resultTableController", function ($scope, $http) {
            //载入表格结果
            $scope.$on("TableResultUpdate", function (event, msg) {
                if (msg == undefined) {
                    $scope.resultTableData = msg;
                    return;
                }
                var pageNumberArray = [];
                for (var i = 1; i <= msg.totalPageNumber; i++) {
                    pageNumberArray.push(i.toString());
                }

                $scope.resultTableData = msg;
                $scope.resultTableData["pageNumberArray"] = pageNumberArray;
            });
            $scope.getResultByPage = function (page) {
                $scope.$emit("TableResultByPageTOParent", page);
            };


        });
    });

</script>
